<?php
   require_once(dirname(__FILE__).'/include/config.inc.php');
   require_once(dirname(__FILE__).'/include/mysqli.class.php');
   require_once'config.php';
   $my_query = new MySql();
   $order_id = $_GET['order_id'];
   if(!empty($order_id)){
	   $order =$my_query->GetOne("select * from dyspw_goods_order  where id = {$order_id} ");
	   if(empty($order)){
		   echo '未查询到该订单信息';
	   }
	   $goods = $my_query->GetOne("select * from dyspw_goods where id = {$order['goods_id']} ");
       $shop = $my_query->GetOne("select * from dyspw_member where id = {$order['shop_id']} ");

       $bank_sql = $mysql->query("select * from dyspw_mem_bank where u_id = {$order['u_id']}");
       $bank = $bank_sql->fetch_all(MYSQLI_ASSOC);
   }
 ?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover">
    <title>申请退款</title>
    <!-- 引入组件库 -->
	<script src="./js/jquery-2.2.4.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="./lib-Jin/vant-index.css">
    <script src="./lib-Jin/vue.min.js"></script>
    <script src="./lib-Jin/vant-index.js"></script>
    <link rel="stylesheet" href="./lib-Jin/all.css">
    <link rel="stylesheet" href="./css/mingxi.css">
    <style>
        .van-radio-group{
            padding: 0 0.3rem;
            box-sizing: border-box;
        }
        .van-radio-group>div{
            height: 1rem;
            line-height: 1rem;
        }
        .van-cell{
            background: none !important;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="top">
            <div class="back">
                <img src="./images/back1.png">
            </div>
            申请退款
        </div>
        <div class="kong"></div>
        <div class="tui-type">
            <div style="font-size: .32rem;color: #333;padding: .2rem 0;">退款方式</div>
        </div>
        <van-radio-group v-model="radio">
            <van-radio name="1" disabled>
                <div>极速退款</div>
                <div>骑手已开始服务，不支持极速退款</div>
            </van-radio>
            <van-radio name="2">
                <div>普通退款</div>
                <div>支持部分商品退款，商家同意后才可退款</div>
            </van-radio>
        </van-radio-group>
        <div class="kong"></div>
        <div class="tui-type" style="display:flex;align-items: center;justify-content: space-between;">
            <div style="font-size: .32rem;color: #333;padding: .2rem 0;">退款银行：</div>
        </div>
        <div class="">
            <select class="bank" name="" style="display: block;width: 90%;padding: 5px;line-height: 35px;margin-left: 5%;">
                <option value="">请选择银行卡</option>
                <?php foreach ($bank as $key => $val): ?>
                    <option value="<?php echo $val['id'] ?>"><?php echo $val['bank_name'] ?>{<?php echo $val['bank_num'] ?>}</option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="kong"></div>
        <div class="tui-type" style="display:flex;align-items: center;justify-content: space-between;">
            <div style="font-size: .32rem;color: #333;padding: .2rem 0;"><?php echo $shop['username']; ?></div>
            <div><a href="tel:<?php echo $shop['mobile']; ?>">致电商家</a></div>
        </div>
        <div style="padding:.3rem;box-sizing: border-box;border-bottom: 1px solid #f5f5f5;">
            <van-checkbox-group v-model="result" ref="checkboxGroup">

                <van-checkbox name="a">
                    <div class="list-log2">
                        <img src="<?php echo $goods['img'] ?>" style="width: 1.1rem;height: 1.1rem;border-radius: 4px;">
                        <div>
                            <div>
                                <div style="font-size: .3rem;color: #000;font-weight: bold;"><?php echo $goods['title'] ?></div>
                            </div>
                            <div style="display: flex;align-items: center;">
                                <div style="font-size: .24rem;color: #595757;margin-top: .2rem;">X <?php echo $order['number'] ?></div>
                            </div>
                        </div>
                    </div>
                </van-checkbox>
                <!-- <div class="list-log3">
                    <div style="margin-left: .5rem;">
                        <div>
                            <div style="font-size: .28rem;color: #000;">准时宝</div>
                        </div>
                        <div style="display: flex;align-items: center;">
                            <div style="margin-left: .94rem;font-size: .28rem;color: #000;">¥28</div>
                        </div>
                    </div>
                    <div style="margin-left: .5rem;font-size: .24rem;color: #595757;margin-top: .2rem;letter-spacing: 2px;">准时宝已生效，已支付赔偿金￥4.0，无法退服务费</div>
                </div>
                <div class="list-log3">
                    <div style="margin-left: .5rem;">
                        <div>
                            <div style="font-size: .28rem;color: #000;">配送费</div>
                        </div>
                        <div style="display: flex;align-items: center;">
                            <div style="margin-left: .94rem;font-size: .28rem;color: #000;">¥4</div>
                        </div>
                    </div>
                </div> -->
            </van-checkbox-group>
        </div>
        <div style="padding: .2rem .3rem;box-sizing: border-box;">
            <div style="display: flex;align-items: center;justify-content: space-between;">
                <!-- <van-checkbox v-model="checked" @change="selectorAll">
                    <div>全选</div>
                </van-checkbox> -->
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div>退款金额</div>
                    <div style="color: #fc504c;">￥ <?php echo $goods['group_money'] ?></div>
                </div>
            </div>
        </div>
        <div class="kong"></div>
        <div style="padding:.3rem;box-sizing: border-box;">
            <div style="display: flex;align-items: center;">
                <div style="font-size: .32rem;color: #333;">退款原因</div>
            </div>
            <div style="background: #fafafa;margin-top: .2rem;">
                <van-field
                    v-model="message"
                    rows="2"
                    autosize
                    type="textarea"
                    maxlength="200"
                    placeholder="填写详细退款原因，有利于商家更快地帮您处理"
                    show-word-limit
                ></van-field>
            </div>
        </div>
        <!-- <div style="padding:.3rem;box-sizing: border-box;">
            <div style="display: flex;align-items: center;">
                <div style="font-size: .32rem;color: #333;">退款银行卡</div>
            </div>
            <div style="background: #fafafa;margin-top: .2rem;">
                <select class="" name="" style="display: block;width: 100%;line-height: 30px;background: #ddd;padding: 0px 10px;border-radius: 5px;">
                    <option value="">zhongg</option>

                </select>
            </div>
        </div> -->
        <div class="btns-bottom">
            <div>
                <div style="font-size: .28rem;">退款金额￥<?php echo $goods['group_money'] ?></div>
                <div style="color: #666;margin-top: .1rem;">退款至您的支付账户</div>
            </div>
            <div style="text-align: center;" @click="confirm">提交</div>
        </div>
    </div>
</body>
</html>
<script>
window.onload = function(){

    new Vue({
        el:"#app",
        data:{
            message:'',        //退款原因
            checked: true,
            radio: '2',        //退款方式 1 是极速退款 2 是普通退款
            result: ['a','b'], //退款商品对选
            date: '',
            show: false
        },
        methods: {
            confirm(){
                if(this.result.length <= 0){
                    vant.Toast('未选择商品');
					return;
                }
                var bank = $(".bank").val();

				$.ajax({
		            url: "refund_ajax.php",
		            type: "post",
		            data: {
					    u_id:'<?php echo $order['u_id']; ?>',
	                    order_id:'<?php echo $order['id']; ?>',
						goods_id:'<?php echo $order['goods_id']; ?>',
	                    shop_id:'<?php echo $order['shop_id']; ?>',
	                    money:'<?php echo $goods['group_money']; ?>',
                        bank:bank,
	                    type: this.radio,
	                    reason:this.message
					},
					dataType: 'JSON',
		            success: function(res) {
						if(res.status === 'y'){
					           setTimeout(() => {
					               location.href = './order_info.php?id=<?php echo $order_id; ?>'
					           }, 2000);
					       }
					       vant.Toast(res.info)
					}
				})
                // axios.post('refund_ajax.php',{
                //     u_id:'<?php echo $order['u_id']; ?>',
                //     order_id:'<?php echo $order['id']; ?>',
				// 	goods_id:'<?php echo $order['goods_id']; ?>',
                //     shop_id:'<?php echo $order['shop_id']; ?>',
                //     money:'<?php echo $goods['group_money']; ?>',
                //     type: this.radio,
                //     reason:this.message
                // })
                // .then(function (res) {
                //     if(res.data.status === 'y'){
                //         setTimeout(() => {
                //             window.history.back()
                //         }, 2000);
                //     }
                //     vant.Toast(res.data.info)
                // })
                // .catch(function (error) {
                //     console.log(error);
                // });
            },
            // selectorAll(e){
            //     if(e){
            //         this.$refs.checkboxGroup.toggleAll(true);
            //     }else{
            //         this.$refs.checkboxGroup.toggleAll();
            //     }
            // },
            back(){
                window.history.back()
            },
            showRiLi(){
                this.show = true
            },
            formatDate(date) {
                return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            },
            onConfirm(date) {
                const [start, end] = date;
                this.show = false;
                this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
                console.log(this.date)
            },
        },
        mounted () {
            // console.log(this.show)
        }
    })

    Vue.use(
        vant.Radio,
        vant.RadioGroup,
        vant.Checkbox,
        vant.CheckboxGroup
    );
}
</script>
<script>
    (function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        if (clientWidth >= 750) {
            docEl.style.fontSize = '100px'
        } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
        }
        }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window)
</script>
